<!DOCTYPE html>
<html lang="en">

<head>
    <!-- <meta charset="UTF-8"> -->
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>登录小米账号</title>
    <link rel="stylesheet" href="./css/bootstrap.min.css">
    <link rel="shortcut icon" href="./favicon.ico" />
    <style>
        * {
            margin: 0;
            padding: 0;
        }

        a {
            text-decoration: none;
            color: #000000;
        }

        li {
            list-style: none;
        }

        img {
            vertical-align: middle;
        }

        .wrap {
            width: 800px;
            height: 600px;
            margin: 30px auto 0;
            background: #fff;
            text-align: center;
        }

        h2 {
            margin-bottom: 15px;
        }

        .logo {
            margin: 30px auto;
        }

        .form-horizontal div.form-group {
            margin-left: 70px;
        }

        body {
            background: #f9f9f9;
        }

        .footer {
            height: 60px;
            margin: 0 auto;
            text-align: center;
            font-size: 14px;
            color: #858585;
        }

        .footer>:first-child {
            margin: 15px 0 10px;
        }

        .footer span {
            margin: 0 10px;
        }

        .form-group {
            margin: 50px auto;
        }

        .col-sm-3 {
            margin-left: 242px;
        }
    </style>
</head>

<body>
    <div class="wrap">
        <img src="./imgs/4.jpg.png" class="logo">
        <h2 class="text-center">登录账号</h2>
        <form class="form-horizontal">
            <div class="form-group">
                <label for="inputEmail3" class="col-sm-2 control-label">用户名</label>
                <div class="col-sm-7">
                    <input type="text" class="form-control input-lg" name='username' placeholder="请输入用户名">
                </div>
            </div>
            <div class="form-group">
                <label for="inputPassword3" class="col-sm-2 control-label">密码</label>
                <div class="col-sm-7">
                    <input type="password" class="form-control input-lg" name='pwd' placeholder="请输入密码">
                </div>
            </div>
            <div class="checkbox">
                <label>
                    <input type="checkbox" name="remember">记住我
                </label>
            </div>
            <div class="form-group">
                <div class="col-sm-offset-2 col-sm-3">
                    <button type="button" class="btn btn-default btn-block">立即登录</button>
                </div>
            </div>
        </form>
    </div>
    <div class="footer">
        <p>简体<span>|</span>繁体<span>|</span>English<span>|</span>常见问题</p>
        <p>小米公司版权所有-京ICP备1004644-京公网安备11010802020134号-京ICP证110507号</p>
     </div>
</body>
<script src="./js/tools.js"></script>
<script src="./node_modules/jquery/dist/jquery.min.js"></script>
<script src="./node_modules/layui-layer/dist/layer.js"></script>
<script>
    //刷新页面，判断cookie中是否有remusername
    var remusername = getCookie('remusername')
    if (remusername) {
        $('[name="username"]').val()
    }
    $(".btn").click(function () {
        if ($("[name='username']").val() === '') {
            alert("用户名不能为空")
            return false
        }
        if ($("[name='pwd']").val() === '') {
            alert("密码不能为空")
            return false
        }
        $(this).prop('disabled',true)
        var loadindex = layer.load(0,{
            shade:[0.2,'skyblue']
        })
        //验证表单，发送Ajax
        $.post('./php/login.php',$('form').serialize(),res=>{
            // console.log(res)
            layer.close(loadindex)
            //将返回的数据结构出来
            var {meta:{status,msg}} = res
            if(status === 1){
                //存储登录成功的cookie
                setCookie("username",$('[name="username"]').val(),3600*2)
                //判断是否要记住用户名
                if($('[name="remember"]').prop('checked')){
                    setCookie("remusername",$('[name="username"]').val(),3600*24*7)
                }
                layer.msg(msg,{
                    icon:1,
                    time:2000
                },function(){
                    //检测本地是否存过URL
                    var url = localStorage.getItem('url')
                    if(url){
                        localStorage.removeItem('url')
                        location.href = url
                        return false
                    }
                    location.href = './xiaomi.html'
                })
            }else{
                $(this).prop('disabled',false)
                layer.msg(msg,{
                    icon:2,
                    time:2000
                })
            }
        },'json')
    })
</script>

</html>